<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="telephone=no" name="format-detection">
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>微派-H5支付-示例</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.7.0/js/md5.min.js"></script>
</head>
<body>
	<div class="all_page">
		<div style="margin: 10px; font-size: 24px;">
			<p>微派-H5支付-示例
			<p />
			<br>
			<br>
			<p onClick="window.demo.startMap()" >在线充值0.01元
			<p />
			<button id="buyButton" style="font-size: 18px;">充值</button>
		</div>
	</div>
</body>
</html>

<!-- #################微派支付--H5支付--集成示例2.0#################开始######################-->
<script>
	var num; //商户单号，确保不重复，如想透传更多参数信息，建议以Json-->String->Base64编码后传输，必填项
	var fee ;//商品价格(单位:元)，必填项
	function loadWPayJS(url, success) {
		var domScript = document.createElement('script');
		domScript.id = 'wpay-jspay-script';
		domScript.src = url;
		success = success || function() {
		};
		domScript.onload = domScript.onreadystatechange = function() {
			if (!this.readyState || 'loaded' === this.readyState
					|| 'complete' === this.readyState) {
				success();
				setTimeout(clickToPay, 100);
				this.onload = this.onreadystatechange = null;
				this.parentNode.removeChild(this);
			}
		}
		document.getElementsByTagName('head')[0].appendChild(domScript);
	}

	function clickToPay() {
		document.getElementById("buyButton").click();
	}
	function test(price,outer_no) {
		num = outer_no; //商户单号，确保不重复，如想透传更多参数信息，建议以Json-->String->Base64编码后传输，必填项
		fee = price;//商品价格(单位:元)，必填项
	      document.getElementById("buyButton").innerHTML =   num+","+fee;
	      loadWPayJS(
					'http://jspay.wiipay.cn/1/jspay/wpayscripts.do?appId=645985055c9a653a33d84bb1455d8ee3',
					function() {
						document.getElementById("buyButton").onclick = function() {
							
							var app_id = "645985055c9a653a33d84bb1455d8ee3";//微派分配的appId,联系运营人员获取，实际项目中请替换真实appId
							var body = "在线充值"; //商品名称，必填项，请勿包含敏感词
							var callback_url = "http://jspay.wiipay.cn/1/jspay/result.do";//支付成功后跳转的商户页面(用户看到的页面)
							var channel_id = "default";//渠道编号
	          
							var version = "2.0"; //版本号，默认填写2.0即可，必填项
							var out_trade_no=num ; //商户单号，确保不重复，如想透传更多参数信息，建议以Json-->String->Base64编码后传输，必填项
							var total_fee =fee;//商品价格(单位:元)，必填项
							var key = "felhkwgmafvkkfejobrz0f03lxofmqte";//签名所需key,联系运营人员获取

							//本签名示例，仅为了演示，实际项目中为了安全考虑，请勿将key对外。字符串拼接规则为，参与签名的参数，按字母序key=value方式然后加上key进行md5,最后sign转大写
							var sign_prep = "app_id=" + app_id + "&body=" + body
									+ "&callback_url=" + callback_url + "&channel_id="
									+ channel_id + "&out_trade_no=" + out_trade_no
									+ "&total_fee=" + total_fee + "&version=" + version
									+ key;

							var sign = md5(sign_prep).toUpperCase();//签名串,签名规则:MD5，utf-8

							WP.click({
								"instant_channel" : "wx",//配置默认支付方式，当仅有一个支付方式时，不会弹出收银台，会直接跳转到支付界面；支付宝ali，微信公众号wx，银联un，网银wy，此参数不参与签名
								//"debug":1, //开启调试模式，会显示错误信息，注意，上线后需要去掉，此参数不参与签名
								"body" : body,
								"callback_url" : callback_url,
								"channel_id" : channel_id,
								"out_trade_no" : out_trade_no,
								"total_fee" : total_fee,
								"sign" : sign,
								"version" : version
							});

							/**
							 * click调用错误返回：默认行为console.log(err)
							 */
							WP.err = function(err) {
								//err 为object, 例 ｛"ERROR" : "xxxx"｝;
								console.log(err);
							}
						};

					});
	}
	function start() {
		window.demo.startMap();
		
	}
	
	function clickToPay2(price,outer_no) {
		
		test(price,outer_no);
		
	}
	
	
</script>
<!-- #################微派支付--H5支付--集成示例2.0#################结束######################-->